<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器  XXX空格XXX */
        div span{
            color:blue;
        }
        /* 子代选择器  XXX>XXX */
        div>span{
            background-color: pink;
        }
        /* “相邻”兄弟选择器(“后面的”兄弟) */
        /* p+span{
          border:10px solid red; 
        } */

        /* 通用兄弟选择器: “后面的”所有兄弟*/
        p~span{
            border:10px solid #ccc;
        }
        /* 群组选择器 */
        div,p,.aa{
            border:10px solid orange;
        }
        /* 交集选择器 */
        h1.bb{
          font-size:50px;
        }
    </style>
</head>
<body>
    <div>
        <span>111</span>
        <p class="bb">
            <span>222</span>
        </p>
        <span>333</span>
        <i>iii</i>
        <span>444</span>
    </div>
    <h1>111</h1>
    <h1 class="bb">123</h1>
    <h1>234</h1>
    <u class="aa">uuu</u>
</body>
</html>